<template>
  <div class="login">
    <div class="inLogin">
      <div class="tit">Login</div>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>

        <el-radio v-model="role" label="0">管理员</el-radio>
        <el-radio v-model="role" label="1">普通</el-radio>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button @click="$router.go(0)">取消</el-button>

      </el-form>
    </div>
  </div>
</template>

<script>
import { login, getAuthority, getCommon } from '@/api'
export default {
  data() {
    return {
      role: '0',
      form: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          {
            required: true,
            // 验证不通过时，错误提示文案
            message: '当前字段是必填的'
          }
        ],
        password: [
          {
            required: true,
            // 验证不通过时，错误提示文案
            message: '当前字段是必填的'
          },
          {
            pattern: /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$/,
            message: '必须包含一个大写，一个小写字母，且长度为8到16位'
          }
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      login(this.from).then(res => {
        if (res.data.code == 200) {
          sessionStorage.setItem('token', res.data.data.token)
          sessionStorage.setItem('role', res.data.data.role)
          sessionStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
          this.$store.commit('user/INIT_STATE', res.data.data)
          // 发送不同权限的登录
          if (this.role == 0) {
            // 管理员
            getAuthority().then(valu => {
              const { asidNav, newRouter } = valu.data.data
              sessionStorage.setItem('asidNav', JSON.stringify(asidNav))
              sessionStorage.setItem('newRouter', JSON.stringify(newRouter))
              this.$store.commit('authority/INIT_NAV', asidNav)
              this.$store.commit('authority/INIT_ROUTER', newRouter)
              this.$message({
                type: 'success',
                message: '提交成功!',
                onClose: () => {
                  this.$router.replace('/dashBoard')
                }
              })
            })
          } else {
            // 普通
            getCommon().then(valu => {
              const { asidNav, newRouter } = valu.data.data
              sessionStorage.setItem('asidNav', JSON.stringify(asidNav))
              sessionStorage.setItem('newRouter', JSON.stringify(newRouter))
              this.$store.commit('authority/INIT_NAV', asidNav)
              this.$store.commit('authority/INIT_ROUTER', newRouter)
              this.$message({
                type: 'success',
                message: '提交成功!',
                onClose: () => {
                  this.$router.replace('/dashBoard')
                }
              })
            })
          }
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.login {
  background-image: url(https://img0.baidu.com/it/u=3470809801,3204060940&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;

  .inLogin {
    width: 500px;
    height: 400px;
    background-color: azure;
    margin: auto;
    text-align: center;
    margin-top: 150px;
    padding-top: 50px;
    border-radius: 50px;

    .tit {
      font-size: 50px;
      margin-bottom: 50px;
    }

    .el-input {
      width: 300px;
    }

    .butt {
      margin-top: 50px;
    }
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
